<!--  -->
<template>
<div class=''>
  <!-- <div style="display: flex;justify-content: space-around;"> -->
    <!-- 左侧列表区 -->
  <div class="content">
    <div style="width: 100%;height: 300px;border: 1px solid transparent;"> <img src="./../../assets/images/4.jpg" alt="" style="width: 100%;height:100%"></div>
    <el-divider content-position="center">通知公告</el-divider>
   <div class="info" v-for="(item,index) in arr " :key="index">

    <div style="display:flex;" > <div class="circle"></div> <span style="color:#666666;cursor: pointer;" @click="jumpDesc(item)">{{ item.title }}</span></div>
    <div style="color:#999999">{{ item.addtime }}</div>
    
   </div>

   <el-pagination
    background
  :page-size="formInline.pageSize"
  layout="prev, pager, next"
  :total="formInline.total">
</el-pagination>
  </div>
  <!-- 分页 -->
  
  <!-- 右侧快捷信息区 -->
  <!-- <div class="right"></div> -->
  <!-- </div>  -->
</div>
</template>

<script>
import {getAfficheList} from '@/api'
export default {
  components: {},
  data  () {
    return {
      arr:[],
      pageNum:10,
      pageSize:20,
      total:100,
      formInline: {
        current: 1,
        size: 10,
        total: 10,
        title:''
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
   getData(){
    getAfficheList(this.formInline).then(res=>{
      console.log(res)
      this.arr=res.result.records
    })
    //  let res={
    //    count:100,
    //    result:[
    //     {
    //       id:'1',
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //         id:'2',
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //         id:'3',
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     }
    //     ,  {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     },
    //       {
    //       title:'你好',
    //       addtime:'2022-4-2 12:11:23'
    //     }
      
    //   ],
    //    pageSize:20,
    //    pageNum:1
    //  }
    //  this.arr= res.result
    //  this.pageNum=res.pageNum,
    //  this.pageSize=res.pageSize,
    //  this.total=res.count
   },
   jumpDesc(par){
    console.log(par)
    this.$router.push({name: 'page8', params: {key: par}})
   }
  },
  created  () {

  },
  mounted  () {
   this.getData()
  },
  beforeCreate  () {},
  beforeMount  () {}, 
  beforeUpdate  () {},
  updated  () {}, 
  beforeDestroy  () {}, 
  destroyed  () {},
  activated  () {} 
}
</script>
<style  scoped>
.content{
  width:80%;
  height:700px;
  margin:  0 auto;
  /* border:1px solid red; */
}
.right{
  width:30%;
  /* height:700px; */
  border: 1px solid red;
}
.info{
  width:100%;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */
  height:30px;
  margin: 15px 0;
  line-height: 30px;
  background: #f8f8f8;
  padding: 10px 0;

}
.circle{
  width:5px;
  height:5px;
  border-radius:50% ;
  background: #666;
  margin: 12px 8px;
}
</style>